<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :width="'500px'"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <template v-if="from">
        <div class="s_signUp s_flex s_justify_content_between" v-if="isShow">
          <!-- <div class="s_signUp_img sq_xl">
          <img src="@/assets/web/central.png" />
          </div>-->
          <div class="s_signUp_left">
            <h3 class="sq_content_color sq_tilte6 cut">{{ text.title }}</h3>
            <h3 class="sq_content_color sq_tilte6 cut">{{ text.cut }}</h3>

            <!-- <div class="demo-input-suffix">
            <el-input placeholder="请填写公司" v-model="form.company">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            </div>-->
            <div class="btnCheckbox">
              <el-button
                v-for="(item, index) in btnArray"
                :key="index"
                :class="{ active: item.btnActive }"
                @click="clickBtnName(item.value, index)"
                >{{ item.label }}</el-button
              >
            </div>
            <div class="demo-input-suffix">
              <el-button
                style="
                  display: block;
                  width: 100%;
                  background-color: #33bf92;
                  border-color: #33bf92;
                "
                @click="submit"
                type="primary"
                >{{ text.next }}</el-button
              >
            </div>
          </div>
        </div>
        <div class="s_signUp s_flex s_justify_content_between" v-if="!isShow">
          <!-- <div class="s_signUp_img sq_xl">
          <img src="@/assets/web/central.png" />
          </div>-->
          <div class="s_signUp_left">
            <h1 class="sq_content_color sq_tilte6">
              请填写您的联系方式，工作人员将尽快与您联系
            </h1>
            <div class="demo-input-suffix">
              <el-input placeholder="请填写您的姓名" v-model="form.name">
                <i slot="prefix" class="el-input__icon el-icon-date"></i>
              </el-input>
            </div>
            <div class="demo-input-suffix">
              <el-input placeholder="请填写手机号码" v-model="form.phone">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </div>
            <div class="demo-input-suffix">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6 }"
                placeholder="请填写其它补充信息"
                v-model="form.remark"
              ></el-input>
            </div>
            <div class="demo-input-suffix">
              <el-button
                style="
                  display: block;
                  width: 100%;
                  background-color: #33bf92;
                  border-color: #33bf92;
                "
                @click="btnOk"
                type="primary"
                >{{ text.btn }}</el-button
              >
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="s_signUp s_flex s_justify_content_between">
          <!-- <div class="s_signUp_img sq_xl">
          <img src="@/assets/web/central.png" />
          </div>-->
          <div class="s_signUp_left">
            <h3 class="sq_content_color sq_tilte6 cut">{{ text.title }}</h3>
            <h3 class="sq_content_color sq_tilte6 cut">{{ text.textVlaue }}</h3>
            <div class="demo-input-suffix">
              <el-input placeholder="请填写您的姓名" v-model="form.name">
                <i slot="prefix" class="el-input__icon el-icon-date"></i>
              </el-input>
            </div>
            <div class="demo-input-suffix">
              <el-input placeholder="请填写手机号码" v-model="form.phone">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </div>

            <!-- <div class="demo-input-suffix">
            <el-input placeholder="请填写公司" v-model="form.company">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            </div>-->
            <div class="demo-input-suffix">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6 }"
                placeholder="请填写其它补充信息"
                v-model="form.remark"
              ></el-input>
            </div>
            <div class="demo-input-suffix">
              <el-button
                style="
                  display: block;
                  width: 100%;
                  background-color: #33bf92;
                  border-color: #33bf92;
                "
                @click="submitDone"
                type="primary"
                >{{ text.btn }}</el-button
              >
            </div>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { PAGE_BASE_URL } from "@/config";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
    },
    text: {
      type: Object,
    },
    from: {
      type: Boolean,
    },
    type: {
      type: Number,
      default: () => 7,
    },
  },
  // props: ["dialogVisible", "text", 'from','type'],
  data() {
    return {
      form: {
        name: "",
        company: "",
        phone: "",
        from: "",
        type: 7,
        remark: "",
      },
      array: [],
      isShow: true,
      path: this.$route.path,
      btnArray: [
        {
          label: "海外维权",
          btnActive: false,
          value: "海外维权",
        },
        {
          label: "产学研对接",
          btnActive: false,
          value: "产学研对接",
        },
        {
          label: "专利管理",
          btnActive: false,
          value: "专利管理",
        },
        {
          btnActive: false,
          label: "职称考试",
          value: "职称考试",
        },
        {
          btnActive: false,
          label: "专利保险",
          value: "专利保险",
        },
        {
          btnActive: false,
          label: "质押融资",
          value: "质押融资",
        },
        {
          btnActive: false,
          label: "认证申报",
          value: "认证申报",
        },
        {
          btnActive: false,
          label: "其他业务",
          value: "其他业务",
        },
      ],
    };
  },
  methods: {
    handleClose() {
      this.$emit("handleClose", false);
      this.isShow = true;
      this.form = {
        name: "",
        company: "",
        phone: "",
        from: "",
        type: type,
        remark: "",
      };
    },
    // 下一步按钮
    submit() {
      // if (path)
      this.form.type = this.type;
      // console.log(this.form.type);
      // this.$emit("submit", this.form);
      // console.log(this.form);
      // console.log(111);
      // console.log(this.$route.path);
      this.isShow = false;
      // this.form.type = '海外维权'
    },
    // 提交按钮
    submitDone() {
      this.form.type = this.type;
      // console.log(this.form.type);
      // if (path)
      // console.log(this.path);
      this.$emit("submit", this.form);
      // console.log(this.form);
      // console.log(111);
      // console.log(this.$route.path);
      // this.isShow = false
      // this.form.type = '海外维权'
    },
    // 提交按钮
    btnOk() {
      // 来自
      // console.log(this.form.type.join(',').replace(/\,/g, '、'));
      this.array = this.array.join(",").replace(/,/g, "、");
      // console.log(this.form.type.join(',').replace(/\,/g, '、'));

      this.form.remark = `咨询内容:${this.array}
咨询补充：${this.form.remark}`;
      this.form.from = `${PAGE_BASE_URL}#` + this.$route.path;
      // console.log(this.form.remark);
      // console.log(this.form);
      this.$emit("submit", this.form);
      this.form = {};
    },
    clickBtnName(value, index) {
      this.btnArray[index].btnActive = !this.btnArray[index].btnActive;
      if (this.array.indexOf(value) !== -1) {
        this.array.splice(this.array.indexOf(value), 1);
      } else {
        this.array.push(value);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.s_signUp {
  padding: 0 30px 20px;
  .s_signUp_img {
    width: 280px;
    height: 317px;
    img {
      width: 100%;
    }
  }
  .demo-input-suffix {
    margin-top: 30px;
  }
  .s_signUp_left {
    width: 100%;
    .cut {
      line-height: 1.5;
      margin-top: 20px;
    }
  }
}
.btnCheckbox {
  width: 100%;
  height: 150px;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-sizing: border-box;
  display: flex;
  .el-button {
    margin-left: 0;
    margin: 8px 5px;
    width: 100px;
  }
  .active {
    background-color: #1f3fba;
  }
}

@media (max-width: 750px) {
  .s_signUp .s_signUp_left {
    width: 100%;
  }
}
</style>